<template>
  <label
    class="d-flex gap-row-8 align-center"
    :class="{ pointer: props.clickable }"
    @click="() => props.clickable && onClick()"
  >
    <input class="d-none" type="radio" :checked="props.selected" @input="updateSelected" />
    <div
      class="list d-flex justify-space-between align-center"
      :class="{
        'border-primary': props.selected && !props.disabled,
        'bg-background': props.dark,
        'bg-surface': !props.dark,
        'bg-disable': props.disabled && !props.dark,
        'bg-disable-dark': props.disabled && props.dark,
      }"
    >
      <div
        class="d-flex font-size-14 font-weight-400 line-height-125"
        :class="{ 'justify-space-between w-full': props.checkIcon, 'text-subtitle-x': props.disabled }"
      >
        {{ toCapitalize(card.card.brand) }} **** **** **** {{ card.card.last4 }}
        <div v-if="props.disabled">
          <div class="text-primary pl-2 font-size-14 font-weight-400 line-height-125">
            {{ $t('info.creditCard.disabled') }}
          </div>
        </div>
        <div v-if="props.selected && !props.disabled">
          <Icon v-if="props.checkIcon" name="check" size="16"></Icon>
          <div v-else class="text-primary pl-2 font-size-14 font-weight-400 line-height-125">
            {{ $t('info.default') }}
          </div>
        </div>
      </div>
      <Icon v-if="props.removable" name="trashNoBg" size="16" @click.prevent="removeCard" class="pointer"></Icon>
    </div>
  </label>
</template>

<script setup>
import { defineEmits, defineProps } from 'vue'
import { toCapitalize } from '@/utils/string-helper'

const props = defineProps({
  card: { type: Object, required: true },
  selected: { type: Boolean, default: false },
  clickable: { type: Boolean, default: false },
  removable: { type: Boolean, default: false },
  dark: { type: Boolean, default: false },
  checkIcon: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false },
})

const emit = defineEmits(['remove', 'update:selected', 'click'])

const onClick = () => {
  emit('click', props.card)
}

const removeCard = () => {
  emit('remove', props.card.id)
}

const updateSelected = (event) => {
  emit('update:selected', event.target.checked)
}
</script>
<style lang="scss" scoped>
.list {
  border-radius: 0.625rem;
  padding: 0.625rem 1rem;
  width: 100%;
  border: 0.09375rem solid rgb(var(--v-theme-surface));

  &.border-primary {
    border: 0.09375rem solid rgb(var(--v-theme-primary));
  }
}

.bg-disable {
  background-color: rgba(var(--v-theme-surface), 0.5) !important;
}
.bg-disable-dark {
  background-color: rgba(var(--v-theme-background), 0.5) !important;
}
</style>
